<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 画布, 用于使用js画画的 -->
  <!-- canvas三要素: id, width,和height -->
  <canvas id="canvas" width="400" height="400"></canvas>

  <script>
    // 只能使用js画图
    const canvas = document.querySelector('#canvas')
    // 1. 获取画笔
    const ctx = canvas.getContext('2d')
    // 2. 绘制
    // 参数为: 矩形在画布内起始的x,y坐标,  矩形的宽高
    ctx.fillStyle = 'gold' // 沾墨水
    ctx.fillRect(200, 200, 100, 100) // 画图形
    ctx.fillStyle = '#000' // 蘸墨水
    ctx.fillText('Hello,world', 210, 210) // 画图形

    // 3 上传到服务器
    // - 服务器一般要图片的形式有两种
    // - 1. base64
    // - 2. 图片的二进制对象
    canvas.toBlob((imgFile) => {
      console.log(imgFile)
    })

    // console.dir(canvas.toDataURL())
  </script>
</body>

</html>